<template>
  <div>
    <!-- head -->
    <qy-navigations></qy-navigations>
    <!-- content -->
    <div class="content qy-box-space" >
      <div class="content-card"  v-for="(item,index) in listData" :key="index" @click="jump(item.url,item.id,item.showType)"  >
        <div> 
          <!-- 可预览图片 -->
          <el-image 
            v-if="type == 'img'"
            style="width: 100%; height: 18vh"
            :src="item.cover" 
            fit="cover"
            :preview-src-list="srcList">
          </el-image>
          <!-- 普通封面 -->
          <img v-else :src="item.cover" alt="">
        </div>
        <div class="content-card-title" >{{item.title}}</div>
        <div class="content-card-desc qy-font-limits" >{{item.desc}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Request from '@/server/http'
import Api from '@/server/api'
export default{
    name:'personspaceWorksList',
    data(){
        return{
          /* 数据 */
          listData:[],
          srcList: [],//图片预览列表
          type:'',//作品类别
        }
    },
    methods: {
      initData(api){
        Request.requestPost('', api)
          .then((res) => {
              console.log(res)
              this.listData = res.data.data
              if(this.type == 'sound'){
                this.listData.map((item)=>{
                  Object.assign(item,{title:item.artist},{desc:item.name})
                })
              }else if(this.type == 'img'){
                this.listData.map((item)=>{
                  this.srcList.push(item.cover)
                })
              }
          })
          .catch((err) => {
              console.log(err);
          });
      },
      chooseData(){
        this.type = this.$route.query.type
        switch(this.type){
          case 'video': 
          this.initData(Api.apiPersonSpace.videoList)
          break;
          case 'sound': 
          this.initData(Api.apiPersonSpace.soundList)
          break; 
          case 'img': 
          this.initData(Api.apiPersonSpace.imgList)
          break;
          case 'code': 
          this.initData(Api.apiPersonSpace.codeList)
          break;
          default: 
          break;
        }
      },
      jump(param1,param2,param3){
        switch(this.type){
          case 'video': 
            this.$router.push({path:'/works/videoplayer',query:{src:encodeURI(param1)}})
          break;
          case 'sound': 
            this.$router.push({path:'/works/soundplayer',query:{id:param2}})
          break; 
          case 'code': 
            this.$router.push({path:'/works/codeplayer',query:{showType:param3,src:encodeURI(param1)}})
          break;
          default: 
          break;
        }
      }
    },
    mounted () {
      this.chooseData()
    }
}
</script>

<style scoped lang="scss">
@import "@/styles/variable.scss";
.content{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid $sidebar-border;
  padding: 20px;
  background-color: $sidebar-bg;
  .content-card{
    margin-right: 25px;
    width: 120px;
    height: auto;
    cursor: pointer;
    color: $gray-weight;
    img{
      width: 110px;
      height: 140px;
      object-fit: cover;
      border-radius: 2px;
    }
    .content-card-title{
      font-size: 12px;
      padding: 2px 2px 2px 0;
      text-align: left;
    }
    .content-card-desc{
      font-size: 12px;
      padding: 2px 2px 2px 0;
      text-align: left;
    }
  }
  .content-card:hover{
    color: $blue-weight;
  }
}
</style>